<template>
  <div class="color-picker-com" :style="{width:width}">
        <el-popover  
            :show-arrow="false"
            @show="popoverShow"
            @hide="popoverHide"
            popper-class="color-picker-popover"
            trigger="click" 
            width="278">
            <!-- :key="showPop" -->
            <ColorPicker
                v-model:pureColor="pureColor"
                is-widget
                disableAlpha
                disableHistory
                format="rgb"
                shape="square"
                :picker-type="pickerType"
                use-type="pure"
                lang="ZH-cn">
            </ColorPicker>
            <template #reference>
                <div class="color-picker-button">
                    <div class="color-bg" :style="{backgroundColor:pureColor}"></div>
                    <div class="color-icon">
                        <svg class="icon">
                            <use xlink:href="#keowledge-rongqi1"></use>
                        </svg>
                    </div>
                </div>
            </template>
        </el-popover>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  watch ,
  onMounted
} from 'vue' 

import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

const emit = defineEmits(["changeData"])
const props = defineProps({
    width:{
        type:String,
        default:'72px'
    },
    pickerType:{
        type:String,
        default:'fk'
    },
    color:{
        type:String,
        default:''
    }
})
const pureColor = ref('')
const showPop = ref(false)
onMounted(()=>{
    pureColor.value = props.color
})
watch(()=>props.color,(newv: any)=>{
    pureColor.value = newv
})
watch(pureColor,(newV: any)=>{
    emit("changeData",newV)
})
function popoverShow(){
    showPop.value = true
}
function popoverHide(){
    showPop.value = false
}
</script>
<style lang="scss" scoped>
.color-picker-com{
    border: 1px solid #EEEFF0;
    height: 24px;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    .color-picker-button{
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 24px;
        cursor: pointer;
        background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(135deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(135deg,transparent 75%,#ccc 75%);
        background-size: 12px 12px;
        background-position: 0 0,6px 0,6px -6px,0 6px;
        .color-bg{
            background-color: transparent;
        }
        .color-icon{
            width: 24px;
            background: #fff;
            border-left: 1px solid #EEEFF0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon{
                width: 14px;
                height: 14px;
            }
        }
    }
}
</style>
<style lang="scss">
.color-picker-popover{
    padding: 0px !important;
    box-shadow: none !important;
    .vc-display{
        height: 30px !important;
        .vc-input-toggle{
            text-align: center;
            width: 30px !important;
            &:after{
                margin: 4px auto auto !important;
            }
        }
    }
}
</style>